<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 控制台主页一</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/css/record.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card" lay-href="{:url('Product/order')}">
                <div class="layui-card-header">
                    今日订单
                    <span class="layui-badge layuiadmin-badge layui-bg-blue">件</span>
                </div>
                <div class="layui-card-body">
                    <p class="layuiadmin-big-font">{$count[0]}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card" lay-href="{:url('Activity/clock')}">
                <div class="layui-card-header">
                    活动
                    <span class="layui-badge layuiadmin-badge layui-bg-blue">个</span>
                </div>
                <div class="layui-card-body">
                    <p class="layuiadmin-big-font">2</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card" lay-href="{:url('User/drainage_operate')}">
                <div class="layui-card-header">
                    待审促销商家
                    <span class="layui-badge layuiadmin-badge layui-bg-red">人</span>
                </div>
                <div class="layui-card-body">
                    <p class="layuiadmin-big-font">{$count[2]}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card" lay-href="{:url('User/provide_operate')}">
                <div class="layui-card-header">
                    待审获客商家
                    <span class="layui-badge layuiadmin-badge layui-bg-red">人</span>
                </div>
                <div class="layui-card-body">
                    <p class="layuiadmin-big-font">{$count[2]}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card" lay-href="{:url('Cash/cash')}">
                <div class="layui-card-header">
                    待审提现
                    <span class="layui-badge layuiadmin-badge layui-bg-red">条</span>
                </div>
                <div class="layui-card-body">
                    <p class="layuiadmin-big-font">{$count[3]}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card" lay-href="{:url('Product/refund')}">
                <div class="layui-card-header">
                    待审退款
                    <span class="layui-badge layuiadmin-badge layui-bg-red">条</span>
                </div>
                <div class="layui-card-body">
                    <p class="layuiadmin-big-font">{$count[4]}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card" lay-href="{:url('User/index')}">
                <div class="layui-card-header">
                    日新增粉丝
                    <span class="layui-badge layuiadmin-badge layui-bg-blue">人</span>
                </div>
                <div class="layui-card-body">
                    <p class="layuiadmin-big-font">{$count[5]}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card" lay-href="{:url('User/index')}">
                <div class="layui-card-header">
                    月新增粉丝
                    <span class="layui-badge layuiadmin-badge layui-bg-blue">人</span>
                </div>
                <div class="layui-card-body">
                    <p class="layuiadmin-big-font">{$count[6]}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">订单</div>
                <div class="layui-card-body" pad15>
                    <div id="main2" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">用户</div>
                <div class="layui-card-body" pad15>
                    <div id="main" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js?t=1"></script>
<script src="/static/js/echarts.js"></script>
<!-- 引入 walden 主题 -->
<script src="/static/theme/walden.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console'], function (){

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'walden');
        var myChart2 = echarts.init(document.getElementById('main2'), 'walden');
        var data = '{$data}';
        data = JSON.parse(data);
        var dateList = [];
        var valueGold = [];
        for(var i in data) {
            dateList.push(i);
            valueGold.push(data[i].count);
        }
        var option = {
            title: {
                text: '近一个月新增用户',
                x:'center'
            },
            tooltip: {
                trigger: 'axis',
                //在这里设置
                formatter: '{b}: {c}人'
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {
                        type: ['line', 'bar']
                    }
                }
            },
            xAxis: {
                data: dateList,
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: valueGold,
                itemStyle: {        //上方显示数值
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: '#666',
                                fontSize: 12
                            }
                        }
                    }
                }
            }]
        };

        var data2 = '{$data2}';
        data2 = JSON.parse(data2);
        var dateTime = [];
        var toMonthMoney = [];
        var toMonthNum = [];
        for(var i in data2) {
            dateTime.push(i);
            toMonthMoney.push(data2[i].toMonthMoney);
            toMonthNum.push(data2[i].toMonthNum);
        }
        var option2 = {
            title: {
                text: '近一个月订单',
                x:'center'
            },
            legend: {
                data: ['订单金额', '订单数'],
                orient: 'vertical',
                right: 5,
                top: 50,
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {
                        type: ['line', 'bar']
                    }
                }
            },
            xAxis: {
                data: dateTime
            },
            yAxis: {},
            series: [{
                name: '订单金额',
                type: 'bar',
                data: toMonthMoney
            },{
                name: '订单数',
                type: 'bar',
                data: toMonthNum
            }]
        };

        myChart.setOption(option);
        myChart2.setOption(option2);
    });
</script>
</body>
</html>

